/**
 * 注册页面
 *@author：yanghx
 *@Date: 2020/2/14 20:17
 */
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
// 现在PropTypes不在react中
import PropTypes from 'prop-types';
import {
  Button,
  Icon,
  InputItem,
  List,
  WhiteSpace,
  WingBlank,
} from '@ant-design/react-native';
import {routeConfigMapName} from '@nav/NavConstant';
import NavigationUtil from '@nav/NavigationUtil';
import HttpUtil from '@util/HttpUtil';
import ApiEnum from '@api/ApiEnum';

export default class RegisterPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: null,
      verifyCode: null,
      password: null,
    };
  }

  static propTypes = {test: PropTypes.string};
  static navigationOptions = {
    title: '注册',
  };

  /**
   *
   * 发送短信验证码
   */
  sendCode = () => {
    let phone = this.state.phone.split(' ').join('');
    HttpUtil.post(ApiEnum.register_verify_code, {phone: phone})
      .then(result => {
        if (result.code === 200) {
          alert(result.data);
        } else {
          alert(result.msg);
        }
      })
      .catch(e => {
        console.log(e);
        alert('获取验证码出现异常');
      });
  };

  onRegisterSubmit = () => {
    const params = this.state;
    params.phone = params.phone.split(' ').join('');
    HttpUtil.post(ApiEnum.register, params)
      .then(result => {
        if (result.code === 200) {
          //注册成功
          setTimeout(() => {
            NavigationUtil.goPage(
              this.props.navigation,
              routeConfigMapName.Login,
              null,
            );
          }, 2000);
          alert('注册成功，正在跳转到登陆页面');
          return;
        }
        alert(result.msg);
      })
      .catch(e => {
        console.log(e);
        alert('注册失败');
      });
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.title}>
          <Text style={styles.title_fontStyle}>手机注册</Text>
        </View>

        <List style={styles.context}>
          <WingBlank>
            <InputItem
              clear
              type={'phone'}
              value={this.state.phone}
              onChange={value => {
                console.log(value);
                this.setState({
                  phone: value,
                });
              }}
              placeholder="请输入手机号">
              <Icon name={'mobile'}/>
            </InputItem>
            <InputItem
              clear
              type="number"
              value={this.state.verifyCode}
              onChange={value => {
                this.setState({
                  verifyCode: value,
                });
              }}
              extra={
                <Button
                  type="primary"
                  size="small"
                  disabled={!this.state.phone}
                  onPress={this.sendCode}>
                  发送验证码
                </Button>
              }
              placeholder="短信验证码">
              <Icon name={'message'}/>
            </InputItem>
            <InputItem
              clear
              value={this.state.password}
              onChange={value => {
                this.setState({
                  password: value,
                });
              }}
              placeholder="请输入密码">
              <Icon name={'lock'}/>
            </InputItem>
            <WhiteSpace size="xl"/>
            <Button
              styles={styles.submit_button}
              onPress={this.onRegisterSubmit}
              type="primary">
              注册
            </Button>
          </WingBlank>
        </List>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  title: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title_fontStyle: {
    fontSize: 50,
    color: '#53c0ae',
  },
  context: {
    flex: 2,
  },
});
